<template>
    <div :class="['elementTable',{'isFixed': pagFixed},{'singleSelect': isSingleSelect}]">
        <el-table :data="data" v-loading="loading" :height="tableHeight" v-resize-height="tableHeight" tooltip-effect="light"
                  @selection-change="handleSelectionChange" border fit ref="elementTable">
            <el-table-column type="selection" width="45" v-if="isNeedSelect">
            </el-table-column>
            <template v-for="(item,index) in columns">
                <el-table-column v-if="!item.render" :key="index" v-bind.sync="item['config']" show-overflow-tooltip :resizable="false">
                </el-table-column>
                <el-table-column v-else :key="index" v-bind.sync="item['config']" show-overflow-tooltip :resizable="false">
                    <template slot-scope="scope">
                        <expand-item :column="item" :row="scope.row" :render="item.render"></expand-item>
                    </template>
                </el-table-column>
            </template>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNo" v-if="isNeedPag"
                       :page-sizes="[5, 10, 15, 20, 30, 50 ,100]" :page-size="pageSize" layout="->, sizes, total, prev, pager, next"
                       :total="total" background>
        </el-pagination>
    </div>
</template>

<script>
export default {
    name: "elementTable",
    props: {
        data: {
            type: Array,
            default: () => {
                return [];
            },
        },
        columns: {
            type: Array,
            default: () => {
                return [];
            },
        },
        tableHeight: {
            type: Number,
        },
        isNeedPag: {
            type: Boolean,
            default: () => {
                return true;
            },
        },
        isNeedSelect: {
            type: Boolean,
            default: () => {
                return false;
            },
        },
        isSingleSelect: {
            type: Boolean,
            default: () => {
                return false;
            },
        },
        pageNo: {
            type: Number,
            default: () => {
                return 1;
            },
        },
        pageSize: {
            type: Number,
            default: () => {
                return 10;
            },
        },
        total: {
            type: Number,
            default: () => {
                return 0;
            },
        },
        pagFixed: {
            type: Boolean,
            default: () => {
                return true;
            },
        },
        loading: {
            type: Boolean,
            default: () => {
                return false;
            },
        },
    },
    data() {
        return {};
    },
    methods: {
        handleCurrentChange(pageNo) {
            this.$emit("changePageNo", pageNo);
        },
        handleSizeChange(pageSize) {
            this.$emit("changePageSize", pageSize);
        },
        handleSelectionChange(val) {
            if (this.isSingleSelect && val.length > 1) { //是否单选
                this.$refs.elementTable.clearSelection();
                this.$refs.elementTable.toggleRowSelection(val.pop());
                this.$emit("changeSelect", [val.pop()]);
            } else {
                this.$emit("changeSelect", val);
            }
        },
    },
    components: {
        expandItem: {
            name: "expandItem",
            functional: true,
            props: {
                render: Function,
                row: Object,
                column: {
                    type: Object,
                    default: null,
                },
            },
            render: (h, ctx) => {
                return ctx.props.render(h, ctx.props.row);
            },
        },
    },
};
</script>

<style lang="scss">
.elementTable {
    .el-table::before {
        background: #fff;
    }
    .el-pagination {
        margin-top: 20px;
    }
    &.isFixed {
        .el-pagination {
            margin-top: 10px;
            position: fixed;
            bottom: 40px;
            right: 40px;
        }
    }
    &.singleSelect {
        .el-table__header .el-checkbox {
            display: none;
        }
    }
    .operation {
        .iconfont {
            font-size: 24px;
            color: #b7c1c9;
            margin-right: 16px;
            cursor: pointer;
            &:hover {
                color: #abb4bc;
            }
        }
    }
}
</style>